<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="80px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyword">
						<el-input v-model="queryParams.keyword" placeholder="请输入关键词" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
					</el-form-item>
					<el-form-item label="销售渠道" prop="channelType">
						<el-select v-model="queryParams.salesChannel" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_channel" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
				</div>
				<el-form-item>
					<div class="flex col-center row-end" style="margin-right: 0">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">套餐列表</span>
				<div>
					<el-button type="defaultBtn" @click="handleAdd" v-hasPermi="['package_main:add']">新增套餐
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				<el-table-column label="套餐名称" align="center" prop="packageName" width="200px"/>
				<el-table-column label="商品种类" align="center" prop="productCategory" width="120">
					<template #default="scope">
						{{scope.row.productCategory}}
					</template>
				</el-table-column>
				<el-table-column label="商品1" align="center" prop="goods1" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods1')" />
				<el-table-column label="商品2" align="center" prop="goods2" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods2')" />
				<el-table-column label="商品3" align="center" prop="goods3" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods3')" />
				<el-table-column label="商品4" align="center" prop="goods4" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods4')" />
				<el-table-column label="商品5" align="center" prop="goods5" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods5')" />
				<el-table-column label="商品6" align="center" prop="goods6" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods6')" />
				<el-table-column label="商品1" align="center" prop="goods1" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods7')" />
				<el-table-column label="商品2" align="center" prop="goods2" :show-overflow-tooltip="true"
					v-if="isColumnVisible('goods8')" />
				<el-table-column label="销售渠道" align="center" prop="salesChannel">
					<template v-slot="scope">
						<dict-tag :options="bus_channel" :value="scope.row.salesChannel" />
					</template>
				</el-table-column>
				<el-table-column label="启用状态" align="center" prop="status">
					<template v-slot="scope">
						<el-switch v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用"
							inactive-text="禁用" @click="updateEnabled(scope.row)" :loading="loading" />
					</template>
				</el-table-column>
				<el-table-column label="更新时间" align="center" prop="updateTime" width="200" />
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleDetail(scope.row)"
						v-hasPermi="['package_main:detail']"
						>查看详情</el-button>
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
							v-hasPermi="['package_main:edit']">编辑</el-button>
						<el-button size="mini" type="text" @click="handleDelete(scope.row)"
							v-hasPermi="['package_main:remove']">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<operatePackage ref="packagePop" @refreshList="getList"></operatePackage>
	</div>
</template>
<script>
	import {
		listPackage, //列表
		updatePackageStatus, //启用禁用
		delPackage //删除套餐
	} from "@/api/business/product";
	import {
		Search
	} from '@element-plus/icons-vue'
	import operatePackage from "./components/operatePackage.vue";
	export default {
		components:{
			operatePackage
		},
		data() {
			return {
				bus_channel: this.useDict('bus_channel').bus_channel,
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 产品表格数据
				goods: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					salesChannel: '', // 销售渠道
				}, //查询参数
				index: 0
			}
		},
		created() {
			this.getList()
		},
		methods: {
			isColumnVisible(columnName) {
				// 假设只要有一个数据对象的该字段为true，就显示这列
				return this.list.some(item => item[columnName]);
			},
			getKey(index) {
				return index++
			},
			//查询列表
			getList() {
				this.loading = true;
				listPackage(this.queryParams).then((response) => {
					this.list = response.rows;
					for (let key in this.list) {
						this.list[key].status = this.list[key].status == '0' ? true : false
						// this.list[key].index = key
						// this.list[key] = this.list[key].commodityList

					}
					this.list = this.addValuesFromInnerArray()
					this.total = response.total;
					this.loading = false;
				});
			},
			addValuesFromInnerArray() {
				return this.list.map(obj => {
					// 创建一个新对象，包含原始对象的所有属性
					const newObj = {
						...obj
					};

					// 遍历 commodityList，并将每个值赋给新属性
					for (let i = 0; i < obj.commodityList.length; i++) {
						newObj[`goods${i + 1}`] = obj.commodityList[i].commodityName;
					}

					return newObj;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					salesChannel: '', // 销售渠道
				}
				this.handleQuery();
			},
			// 启用状态操作
			updateEnabled(row) {
				this.loading = true;
				let item = {
					id: row.id,
					status: row.status == true ? 0 : 1,
				}
				updatePackageStatus(item).then((response) => {
					this.$modal.msgSuccess("更新成功");
					this.loading = false;
					this.getList();
				});
			},
			//新增
			handleAdd() {
				this.$refs.packagePop.open('')
				// this.$router.push('/package/operatePackage')
			},
			// 编辑
			handleUpdate(row) {
				this.$refs.packagePop.open(row.id)
				// this.$router.push('/package/operatePackage?id=' + row.id)
			},
			// 
			// 查看详情
			handleDetail(row) {
				this.$refs.packagePop.open(row.id,1)
				// this.$router.push('/package/packageDetail?id=' + row.id)
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除套餐编号为"' + ids + '"的数据项？')
					.then(function() {
						delPackage(ids).then(res => {
							that.getList()
							that.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			}
		}
	}
</script>